<template>
	<view class="equipment">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				全部设备
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="top clearfix">
				<view class="left fl clearfix">
					<view class="mess fl">
						<view :class="[attrIndex==1?'active':'']" @click="attrHandle(1)">自营设备</view>
						<text class="dian" v-if="attrIndex == 1"></text>
					</view>
					<view class="mess mess1 fl" @click="attrHandle(2)">
						<view :class="[attrIndex==2?'active':'']">团队设备</view>
						<text class="dian" v-if="attrIndex == 2"></text>
					</view>
				</view>
				<view class="right fr" @click="topage('/subpackageA/equipment/installrecord?id=' + agent_id)">
					<view class="name">安装回收记录</view>
				</view>
			</view>
			<view class="center clearfix">
				<view class="sousuo fl">
					<input type="text" placeholder="请输入关键字" v-model="formData.search" @confirm="search" />
					<image :src="baseUrl + '/wximage/sousuo.png'" @click="search"></image>
				</view>
				<view class="shaixuan fr clearfix" @click="shaixuan">
					<image :src="baseUrl + '/wximage/shaixuan.png'" class="fl"></image>
					<view class="name fl">筛选</view>
				</view>
			</view>
			<view class="bottom">
				<image :src="baseUrl + '/wximage/shebei.png'" class="sb"></image>
				<view class="tishi">设备总台数：{{deviceList.length}}</view>
				<!-- <view class="xinghao" @click="xinghao">设备型号</view>
				<image :src="baseUrl + '/wximage/dataxl.png'" class="xl" @click="xinghao"></image> -->
			</view>
			
			<view class="beijing" v-if="bjstatus" @click="guanbi"></view>
			<view class="tankuang" v-if="shaixuanstatus">
				<view class="liebiao">
					<view class="wenzi">全部</view>
				</view>
				<view class="liebiao">
					<view class="wenzi">8口充电柜-CDL108-C1</view>
				</view>
			</view>
		</view>
		<view class="morebeijing" v-if="morebjstatus" @click="guanbi"></view>
		<view class="moretankuang" v-if="morestatus">
			<view class="bankuai">
				<view class="top">安装状态</view>
				<view class="bottom clearfix">
					<text :class="[formData.anzhuang==''?'active':'']" @click="formData.anzhuang=''">全部</text>
					<text :class="[formData.anzhuang==1?'active':'']" @click="formData.anzhuang=1">已安装</text>
					<text :class="[formData.anzhuang==2?'active':'']" @click="formData.anzhuang=2">未安装</text>
				</view>
			</view>
			<view class="bankuai">
				<view class="top">设备状态</view>
				<view class="bottom clearfix">
					<text :class="[formData.status==''?'active':'']" @click="formData.status=''">全部</text>
					<text :class="[formData.status==1?'active':'']" @click="formData.status=1">在线</text>
					<text :class="[formData.status==2?'active':'']" @click="formData.status=2">离线</text>
				</view>
			</view>
			<view class="bankuai">
				<view class="top">设备属性</view>
				<view class="bottom bottomts clearfix">
					<text :class="[formData.types==''?'active':'']" @click="formData.types=''">全部</text>
					<text :class="[formData.types==1?'active':'']" @click="formData.types=1">充电宝</text>
					<text :class="[formData.types==2?'active':'']" @click="formData.types=2">充电盒子</text>
					<text :class="[formData.types==3?'active':'']" @click="formData.types=3">充电线</text>
				</view>
			</view>
			<view class="bankuai">
				<view class="top">仓内宝数量</view>
				<view class="bottom bottomts clearfix">
					<text :class="[formData.num===''?'active':'']" @click="formData.num=''">全部</text>
					<text :class="[formData.num===0?'active':'']" @click="formData.num=0">空仓</text>
					<text :class="[formData.num==1?'active':'']" @click="formData.num=1">剩1宝</text>
					<text :class="[formData.num==2?'active':'']" @click="formData.num=2">剩2宝</text>
					<text :class="[formData.num==3?'active':'']" @click="formData.num=3">其他</text>
				</view>
			</view>
			<view class="queren" @click="queren">
				确认
			</view>
		</view>
		<view class="content" v-if="deviceList.length != 0">
			<view class="list" v-for="(item,index) in deviceList" :key="index">
				<view v-if="item.type == 1">
					<!-- 充电宝 -->
					<view class="top clearfix">
						<image :src="baseUrl + '/wximage/ordertubiao.png'" class="fl"></image>
						<view class="title fl">仓内宝数：{{item.charger_battery_line}} 借出宝数：{{item.charger_battery_lend!=null?item.charger_battery_lend:0}}</view>
						<view class="money fr" v-if="item.charger_runstatus==1">在线</view>
						<view class="money fr" v-else style="color:red">离线</view>
					</view>
					<view class="center">
						<view class="desc">设备名称：{{item.charger_name}}</view>
						<view class="desc" @click="topage('/subpackageA/equipment/weihu?deviceid='+item.charger_number)">设备编码：<text class="color">{{item.charger_number}}</text></view>
						<view class="desc" v-if="item.charger_yuangong_name">所属员工：{{item.charger_yuangong_name}}</view>
						<view class="desc" v-if="item.charger_bussiness_name">所属商户：{{item.charger_bussiness_name}}</view>
						<view class="desc" v-if="item.charger_station_name" @click="topage('/subpackageA/store/detail?stationid=' + item.charger_station_id)">所属门店：<text class="color">{{item.charger_station_name}}</text></view>
					</view>
					<view class="bottom clearfix" v-if="charger_id != item.id" @click="charger_id = item.id">
						<view class="name">展开</view>
						<image :src="baseUrl + '/wximage/right.png'"></image>
					</view>
					<view class="bottom clearfix" v-else @click="charger_id = ''">
						<view class="desc">所属代理商：{{item.charger_agents_name}}</view>
						<view class="desc">设备名称：{{item.charger_name}}</view>
						<view class="desc">安装时间：{{item.created_at}}</view>
						<view class="desc" v-if="item.charger_battery != null">仓内数量：{{item.charger_battery}}</view>
						<view class="desc" v-if="item.charger_battery_line != null">仓内宝数量：{{item.charger_battery_line}}</view>
						<view class="desc" v-if="item.charger_battery_lend != null">借宝中数量：{{item.charger_battery_lend}}</view>
						<view class="desc" v-if="item.charger_battery_dis != null">禁仓宝数量：{{item.charger_battery_dis}}</view>
						<image :src="baseUrl + '/wximage/shang.png'"></image>
					</view>
				</view>
				<view v-if="item.type == 2">
					<!-- 售货机 -->
					<view class="top clearfix">
						<image :src="baseUrl + '/wximage/orderhezitubiao.png'" class="fl"></image>
						<view class="title fl">设备名称：{{item.charger_name}}</view>
						<view class="money fr"></view>
					</view>
					<view class="center">
						<view class="desc" @click="topage('/subpackageA/goods/weihu?deviceid='+item.charger_number)">设备编码：<text class="color">{{item.charger_number}}</text></view>
						<view class="desc">设备型号：{{item.charger_typename}}</view>
						<view class="desc" v-if="item.charger_yuangong_name">所属员工：{{item.charger_yuangong_name}}</view>
						<view class="desc" v-if="item.charger_bussiness_name">所属商户：{{item.charger_bussiness_name}}</view>
						<view class="desc" v-if="item.charger_station_name" @click="topage('/subpackageA/store/detail?stationid=' + item.charger_station_id)">所属门店：<text class="color">{{item.charger_station_name}}</text></view>
					</view>
				</view>
				<view v-if="item.type == 3">
					<!-- 充电线 -->
					<view class="top clearfix">
						<image :src="baseUrl + '/wximage/ordercdxtubiao.png'" class="fl"></image>
						<view class="title fl">设备名称：{{item.charger_name}}</view>
						<view class="money fr"></view>
					</view>
					<view class="center">
						<view class="desc" @click="topage('/subpackageA/goods/weihu?deviceid='+item.charger_number)">设备编码：<text class="color">{{item.charger_number}}</text></view>
						<view class="desc">设备型号：{{item.charger_typename}}</view>
						<view class="desc" v-if="item.charger_yuangong_name">所属员工：{{item.charger_yuangong_name}}</view>
						<view class="desc" v-if="item.charger_bussiness_name">所属商户：{{item.charger_bussiness_name}}</view>
						<view class="desc" v-if="item.charger_station_name" @click="topage('/subpackageA/store/detail?stationid=' + item.charger_station_id)">所属门店：<text class="color">{{item.charger_station_name}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<image :src="baseUrl + '/wximage/empty.png'"></image>
			<text>暂无相关数据</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				keywords: '',
				list: [1],
				attrIndex: 1,
				deviceList: [],
				bjstatus: false,
				shaixuanstatus: false,
				morebjstatus: false,
				morestatus: false,
				formData: {
					bussinessid:uni.getStorageSync('agent_id'),
					page:1,
					pageSize:30,
					search:'',
					anzhuang:'',
					status:'',
					num:'',
					type:1,
					types: '',
				},
				charger_id: '',
				agent_id: '',
			}
		},
		onLoad() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			this.agent_id = uni.getStorageSync('agent_id');
	
			this.getDeviceList();
		},
		onReachBottom() {
			this.formData.page = this.formData.page+1;
			this.getDeviceList();
		},
		methods: {
			getDeviceList(){
				if(this.attrIndex == 1){
					this.formData.type = 1;
				}else{
					this.formData.type = 2;
				}
				this.request({
					url: '/wxdevice/alldevice',
					data: this.formData,
					method: "GET"
				}).then(res => {
					if (res.data.code == 200) {
						if(res.data.data.list.length!=0){
							this.deviceList = res.data.data.list;
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			queren(){
				this.formData.page = 1;
				this.deviceList = [];
				this.morebjstatus = false;
				this.morestatus = false;
				
				this.getDeviceList();
			},
			attrHandle(e){
				this.deviceList = [];
				this.formData.page=1;
				this.attrIndex = e;
				this.getDeviceList();
			},
			search(){
				this.deviceList = [];
				this.formData.page=1;
				this.getDeviceList();
			},
			xinghao(){
				this.bjstatus = !this.bjstatus;
				this.shaixuanstatus = !this.shaixuanstatus;
				
				this.morebjstatus = false;
				this.morestatus = false;
			},
			shaixuan(){
				this.morebjstatus = !this.morebjstatus;
				this.morestatus = !this.morestatus;
				
				this.bjstatus = false;
				this.shaixuanstatus = false;
			},
			guanbi(){
				this.bjstatus = false;
				this.shaixuanstatus = false;
				this.morebjstatus = false;
				this.morestatus = false;
			},
			topage(url){
				uni.navigateTo({
					url
				})
			},
			fanhui() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.equipment {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: #f9f9ff;
		overflow-y: scroll;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				text {
					font-size: 24rpx;
				}

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
			padding: 20rpx 40rpx 0;
			box-sizing: border-box;
			position: relative;
		
			.top{
				.left {
					.mess {
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
			
						view {
							font-size: 24rpx;
							color: #333333;
						}
			
						.dian {
							width: 8rpx;
							height: 8rpx;
							background: #5C88FA;
							display: block;
							border-radius: 50%;
							margin: 0 auto;
						}
			
						.active {
							font-size: 32rpx;
							color: #333333;
							font-weight: 700;
							margin-left: 0;
						}
					}
			
					.mess1 {
						margin-left: 20rpx;
					}
				}
			
				.right {
					width: 170rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin-top: 6rpx;
			
					.name {
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
			
			.center{
				margin-top: 30rpx;
				
				.shaixuan {
					width: 116rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin-top: 10rpx;
				
					image {
						width: 36rpx;
						height: 36rpx;
						margin-left: 10rpx;
						margin-right: 6rpx;
					}
				
					.name {
						font-size: 24rpx;
						color: #333333;
					}
				}
				
				.sousuo {
					width: 80%;
					box-sizing: border-box;
					position: relative;
						
					input {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						background: #ffffff;
						border-radius: 30rpx;
						padding-left: 30rpx;
						color: #999999;
						box-sizing: border-box;
					}
						
					image {
						width: 72rpx;
						height: 40rpx;
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						z-index: 10;
					}
				}
			}
			
			.bottom{
				width: 100%;
				box-sizing: border-box;
				position: relative;
				margin-top: 30rpx;
				background: #FFFFFF;
				height: 52rpx;
				line-height: 52rpx;
				border-radius: 8rpx;
				
				.sb{
					width: 40rpx;
					height: 46rpx;
					position: absolute;
					bottom: 6rpx;
					left: 8rpx;
				}
				
				.tishi{
					font-size: 24rpx;
					color: #333333;
					font-weight: 700;
					padding-left: 60rpx;
				}
				
				.xinghao{
					position: absolute;
					top: 0;
					right: 44rpx;
					font-size: 24rpx;
					color: #333333;
				}
				
				.xl{
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					top: 4rpx;
					right: 0;
				}
			}
		}
		
		.content{
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			margin-top: -30rpx;
			position: absolute;
			
			.list{
				width: 100%;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 26rpx;
				box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;
				
				.top{
					width: 100%;
					border-bottom: 1rpx solid #F1F1F1;
					padding-bottom: 20rpx;
					
					image{
						width: 72rpx;
						height: 72rpx;
						margin-right: 20rpx;
					}
					
					.title{
						font-size: 28rpx;
						color: #333333;
						margin-top: 22rpx;
						font-weight: 700;
					}
					
					.money{
						font-size: 28rpx;
						color: #8B8CFF;
						margin-top: 22rpx;
						margin-right: 8rpx;
						font-weight: 700;
					}
				}
				
				.center{
					width: 96%;
					margin: 0 auto;
					margin-top: 20rpx;
					border-bottom: 1rpx solid #F1F1F1;
					padding-bottom: 20rpx;
					
					.desc{
						width: 90%;
						font-size: 24rpx;
						color: #333333;
						line-height: 44rpx;
					}
					
					.color{
						font-size: 24rpx;
						color: #5C88FA;
					}
				}
				
				.bottom{
					width: 96%;
					margin: 0 auto;
					margin-top: 20rpx;
					position: relative;
					
					.name{
						width: 90%;
						font-size: 24rpx;
						color: #333333;
						float: left;
						line-height: 36rpx;
					}
					
					.desc{
						width: 90%;
						font-size: 24rpx;
						color: #333333;
						line-height: 44rpx;
					}
					
					image{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
			}
		}
		
		.empty{
			width: 100%;
			margin: 200rpx auto 0;
			text-align: center;
			
			image{
				width: 390rpx;
				height: 340rpx;
			}
			
			text{
				display: block;
				margin-top: 60rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.morebeijing{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background: #000000;
			opacity: 0.5;
			z-index: 100;
		}
		
		.moretankuang{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			z-index: 200;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 20rpx 0;
			
			.bankuai{
				
				.top{
					background: #FDFDFD;
					font-size: 32rpx;
					color: #333333;
					height: 72rpx;
					line-height: 72rpx;
					padding-left: 40rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #DFE6FF;
				}
				
				.time{
					margin-top: 20rpx;
					margin-left: 40rpx;
					font-size: 24rpx;
					color: #333333;
					
					text:nth-of-type(1){
						font-size: 24rpx;
						color: #FA5E5C;
					}
					
					text:nth-of-type(2){
						font-size: 24rpx;
						color: #5C88FA;
					}
				}
				
				.bottom{
					margin-top: 40rpx;
					margin-bottom: 50rpx;
					
					text{
						display: inline-block;
						margin-left: 60rpx;
						width: 160rpx;
						height: 54rpx;
						text-align: center;
						border-radius: 16rpx;
						line-height: 54rpx;
						background: #F6F6F6;
						font-size: 24rpx;
						color: #333333;
					}
					
					.active{
						background: #E3F2FF;
					}
				}
				
				.bottomts{
					
					text{
						margin-left: 25rpx;
						width: 120rpx;
					}
				}
			}
			
			.queren{
				width: 180rpx;
				margin: 0 auto;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 16rpx;
				text-align: center;
				background: #3B91F8;
				margin-top: 60rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		
		.beijing{
			position: absolute;
			top: 250rpx;
			left: 0;
			width: 100%;
			height: 78vh;
			background: #000000;
			opacity: 0.5;
			z-index: 100;
		}
		
		.tankuang{
			position: absolute;
			top: 250rpx;
			left: 0;
			width: 100%;
			height: 400rpx;
			background: #fff;
			overflow-y: scroll;
			z-index: 200;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 20rpx 0;
			
			.liebiao{
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				position: relative;
				
				.wenzi{
					font-size: 24rpx;
					color: #999999;
				}
				
				image{
					width: 100%;
					height: 72rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}
</style>